import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import PassWord from './components/password';
import Code from './components/code';
import Reload from './components/reload';
import { connect, history } from 'umi';
import './index.less';
const Login = (props) => {
  const { dispatch, handleSearchsOver } = props;
  const [status, setStatus] = useState('login');
  const items = [
    {
      key: 'code',
      label: `密码登录`,
      children: <PassWord handle={handleSearchsOver} setStatus={setStatus}></PassWord>,
    },
    {
      key: 'password',
      label: `验证码登录`,
      children: <Code handle={handleSearchsOver}></Code>,
    },
  ];
  if (status === 'login') {
    return (
      <div className="login_box">
        <Tabs defaultActiveKey="1" size={'large'} items={items} />
      </div>
    );
  } else {
    return (
      <div className="login_box">
        <Reload setStatus={setStatus} handle={handleSearchsOver}></Reload>
        <div
          className="login_back"
          onClick={() => {
            setStatus('login');
          }}
        >
          返回密码登录
        </div>
      </div>
    );
  }
};
export default connect(({ loading }) => ({
  loading: loading.models.login,
}))(Login);
